<template>
	<view class="writingList">
		<view class="top">
			<view class="top-img">
				<img src="https://pic.imgdb.cn/item/6691f36dd9c307b7e9a6d084.png" alt="" />
			</view>
		</view>
		<view class="body">
			<view class="body-top">
				<text class="text">享受更多特权</text>
				<button class="my-button" size="default"  @click="goBuy" plain="true">去解锁</button>
			</view>
			<view class="item" v-for="(item,index) in listData" :key="index">
				<view class="item-top" @click="expand(index)">
					<view class="img">
						<image src="../../static/book1.png" mode="widthFix"></image>
					</view>
					<view class="year">2024年{{index + 1}}月</view>
					<view class="more-img">
						<image v-show="!item.show" src="../../static/more-down.png" mode=""></image>
						<image v-show="item.show" src="../../static/more-up.png" mode=""></image>
					</view>
				</view>
				<view class="expand" v-show="item.show" >
					<view class="item2" v-for="(item2,index2) in item" :key="index2" @click="goDetail(item2)">
						<view class="item2-num">
							事件{{index2 + 1}}
						</view>
						<view class="item2-title">
							{{item2.title}}
						</view>
						<view class="item2-more">
							<image src="../../static/more.png" mode=""></image>
						</view>
					</view>
					
				</view>
				<!-- <view class="participants">{{item.participants}}人参与</view>
				<button class="my-button" size="default"  plain="true">去测试</button> -->
			</view>
		</view>
	</view>
</template>

<script setup> 
	import {reactive,ref,onMounted} from 'vue'
	import store from '../../store/index.js'
	import util from '../../util/index.js'
	onMounted(() => {
		console.log('store')
		// store.commit('changeName',"sunzhengkai")
		// console.log('store',store.state.username)
		getNewsList()
	})
	const listData = ref([]);
	const goDetail = (item) => {
		uni.navigateTo({
			url:'/pages/newsDetail/newsDetail?id=' + item._id
		})
	}
	const expand = (index) => {
		listData.value[index].show = !listData.value[index].show
	}
	const goBuy = () => {
		console.log('去购买')
		uni.navigateTo({
			url:'/pages/buy/buy'
		})
	}
	const getNewsList = () => {
		uni.request({
			url:util.baseUrl + '/adminapi/news/list',
			success:(res)=> {
				const data = res.data.data;
				let newsData=[]
				data.forEach((item,index) => {
					if(newsData[item.category-1]) {
						newsData[item.category-1].push(item)
					}else {
						newsData[item.category-1] = []
						newsData[item.category-1].push(item)
					}
					
				})
				listData.value = newsData
				console.log('newsData',newsData)
			}
 		})
	}
</script>

<style lang="scss">
.writingList {
	height: 100vh;
	background-color: #fee793;
	button{
		background: linear-gradient(to left, #fdd21f, #ffe537);
		height: 60rpx;
		border-radius: 30rpx;
		font-weight: 700;
		width: 220rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.top{
		position: fixed;
		z-index: 999;
		height: 290rpx;
		width: 100%;
		font-weight: 700;
		background: linear-gradient(to bottom, #fcd22e, #fee793);
		.top-img {
			// background: url(../../static/GotoSchool.png) no-repeat;
			// background-size: 100% 100%;
			margin-top: 20rpx;
			margin-left: 150rpx;
			width: 394rpx;
			height: 220rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}	
	.body {
		position: absolute;
		height: calc(100vh - 290rpx);
		overflow: auto;
		top: 290rpx;
		width: 100%;
		background-color: #f7f7f9;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		.body-top {
			height: 80rpx;
			width: 100%;
			background: linear-gradient(to bottom, #fdeae8, #f7f7f9);
			font-weight: 800;
			text-align: center;
			line-height: 80rpx;
			.text {
				position: absolute;
				left: 60rpx;
			}
			.my-button {
				position: absolute;
				right: 52rpx;
				top: 10rpx;
			}
		}
		.item {			
			position: relative;
			margin: 0 auto;
			margin-bottom: 20rpx;
			width: 640rpx;
			min-height: 140rpx;
			border-radius: 20rpx;
			//border: 0.2rpx solid #d6d6d6;
			background-color: #fff;
			box-shadow: 1rpx 1rpx 1rpx 1rpx #d6d6d6;
			.expand {
				
				.item2 {
					display: flex;
					position: relative;
					padding:10rpx 0;
					.item2-num {
						margin-left: 26rpx;
						background-color: #e54032;
						padding: 5rpx 10rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
					.item2-title {
						width: 400rpx;
						 overflow:hidden;
						  white-space: nowrap;
						  text-overflow: ellipsis;
						  -o-text-overflow:ellipsis;
					}
					.item2-more {
						position: absolute;
						width: 30rpx;
						height: 30rpx;
						right: 26rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.item-top {
				min-height: 140rpx;
			}
			.img {
				position: absolute;
				top: 30rpx;
				left: 30rpx;
				width: 80rpx;
				height: 80rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.year {
				position: absolute;
				top: 47rpx;
				left: 130rpx;
			
				font-weight: 700;
			}
			.more-img {
				position: absolute;
				top: 50rpx;
				right: 30rpx;
				font-size: 28rpx;
				color:#9f9f9f ;
				width: 30rpx;
				height: 30rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.line {
				position: absolute;
				top: 140rpx;
				width: 100%;
				height: 5rpx;
				background-color:#f7f7f9 ;
			}
			.participants {
				position: absolute;
				bottom: 20rpx;
				left: 30rpx;
				font-size: 28rpx;
				color:#9f9f9f ;
			}
			.my-button {
				position: absolute;
				bottom: 10rpx;
				right: 30rpx;
			}
		}
	}
}

</style>